<template>
  <view style="min-height: 100vh;" class="u-skeleton" :class="['goodsDetail',{scrollForbidden:showModal==true}]">
    <!-- 头部 -->
    <swiper autoplay indicator-dots='true' indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="white" class="u-skeleton-fillet" >
      <swiper-item v-for="(value,index) in goodsDetail.thumb_url" :key="index">
        <img :src="value.img_Url" class="slide-image" mode="aspectFill"/>
      </swiper-item>
    </swiper>
	<!-- <u-swiper height="300px" :list="imgList" indicator-pos="bottomCenter"></u-swiper> -->
    <view class="name_wrapper">
	   <view class="desc">
<!--	     <view class="price">-->
<!--			<span class="s-price u-skeleton-fillet">￥{{goodsDetail.selling_price}}</span>-->
			<!-- <view class="m-price">￥{{goodsDetail.m_price}}</view> -->
<!--	     </view>-->
	     <view class="bottom">
			<!-- <view class="sale">月销售{{goodsDetail.sale_count}}笔</view> -->
	     </view>
	   </view>
      <view class="name u-skeleton-fillet">
        {{goodsDetail.name}}
      </view>
	  <view class="top-detail u-skeleton-fillet">
	    {{goodsDetail.desc}}
	  </view>
    </view>
    <!-- 头部结束 -->


    <!-- 规格等详情 -->
    <view class="goods_desc">
      <view>
       <!-- <view class="goods_desc_item">
          <view class="left-text u-skeleton-fillet">运费：<span>￥10</span></view>
          <span class="list_item_arrow">
            <image src="../../static/goodsDetail/jiantou_you.png"></image>
          </span>
        </view> -->
<!--		<view class="goods_desc_item" @click="showCart">-->
<!--		  <view class="left-text u-skeleton-fillet">规格：<span>选择商品规格数量</span></view>-->
<!--		  <span class="list_item_arrow">-->
<!--		    <image src="../../static/goodsDetail/jiantou_you.png"></image>-->
<!--		  </span>-->
<!--		</view>-->
		<view class="goods_desc_item" @click="showDiscountPopup">
		  <view class="left-text one-line u-skeleton-fillet">
			<span><span style="color: #B8B8B8;font-size: 12px;">优惠活动：</span><span>{{discountStr?discountStr:'无'}}</span></span>
		  </view>
		  <span class="list_item_arrow">
		    <image src="../../static/goodsDetail/jiantou_you.png"></image>
		  </span>
		</view>
		<view style="width: 100%;height: 10px;"></view>
    <!-- 优惠券 -->
    <view class="page">
      <view class="u-wrap">
        <view class="coupon" v-for="(item,index) in couponList" :key="index">
          <view class="left">
            <view class="sum">
              ￥
              <text class="num">{{item.money}}</text>
            </view>
            <view class="type"><span v-if="item.type==='satisfy'">满{{item.satisfy_money}}元可用</span></view>
          </view>
          <view class="right">
            <view class="top">
              <view class="title">
                <text class="tag" :class="{'spec':item.type==='direct'}">{{item.type==='direct'?'无门槛优惠':'满金额优惠'}}</text>
                <text>{{item.name}}</text>
              </view>
              <view class="bottom">
                <view class="date u-line-1">{{item.start_time}}至{{item.end_time}}</view>
                <!-- <view class="immediate-use" @click="couponReceive(item.id)">领取</view> -->
              </view>
            </view>
            <view class="tips">
              <view class="explain">
                <view v-if="item.is_receive=='no'" class="immediate-use" @click="couponReceive(item.id)">领取</view>
                <view v-else class="immediate-use" style="border: 2rpx solid grey;color: grey;">已领取</view>
                <!-- <u-icon name="zhuanfa" class="transpond" :size="24"></u-icon> -->
                <!-- <text>详细信息</text> -->
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
<!--		<view class="spec-value">-->
<!--			<view style="padding-bottom: 10px;font-weight: bold">说明书</view>-->
<!--			<view class="content">-->

<!--			  <view class="content-item" v-if="goodsDetail.specification">-->
<!--				<view class="item-left">药品规格</view>-->
<!--				<view  class="item-right">{{goodsDetail.specification}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.approval_number">-->
<!--			  	<view class="item-left">批准文号</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.approval_number}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.manufacturer">-->
<!--			  	<view class="item-left">生产厂商</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.manufacturer}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.manufacturer_address">-->
<!--			  	<view class="item-left">生产厂商地址</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.manufacturer_address}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.manufacturer_contact">-->
<!--			  	<view class="item-left">生产厂商联系方式</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.manufacturer_contact}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.electronic_regulatory_code">-->
<!--			  	<view class="item-left">电子监管码</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.electronic_regulatory_code}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.usage_and_dosage">-->
<!--			  	<view class="item-left">用法用量</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.usage_and_dosage}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.indications">-->
<!--			  	<view class="item-left">适应症</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.indications}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.adapt_to_the_crowd">-->
<!--			  	<view class="item-left">适应人群</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.adapt_to_the_crowd}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.component">-->
<!--			  	<view class="item-left">成分</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.component}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.adverse_reactions">-->
<!--			  	<view class="item-left">不良反应</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.adverse_reactions}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.contraindications">-->
<!--			  	<view class="item-left">禁忌</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.contraindications}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.precautions">-->
<!--			  	<view class="item-left">注意事项</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.precautions}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.interaction">-->
<!--			  	<view class="item-left">药物相互作用</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.interaction}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.medication_for_children">-->
<!--			  	<view class="item-left">儿童用药</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.medication_for_children}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.medication_for_pregnancy_x_lactation">-->
<!--			  	<view class="item-left">妊娠与哺乳用药</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.medication_for_pregnancy_x_lactation}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.medication_for_aged">-->
<!--			  	<view class="item-left">老年人用药</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.medication_for_aged}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.properties">-->
<!--			  	<view class="item-left">性状</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.properties}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.packing">-->
<!--			  	<view class="item-left">包装</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.packing}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.dosage_form">-->
<!--			  	<view class="item-left">剂型</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.dosage_form}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.storage">-->
<!--			  	<view class="item-left">贮藏</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.storage}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.pharmacological_action">-->
<!--			  	<view class="item-left">药理作用</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.pharmacological_action}}</view>-->
<!--			  </view>-->

<!--			  <view class="content-item" v-if="goodsDetail.expiry_date">-->
<!--			  	<view class="item-left">有效期</view>-->
<!--			  	<view  class="item-right">{{goodsDetail.expiry_date}}</view>-->
<!--			  </view>-->

<!--			</view>-->
<!--		</view>-->
		<view style="width: 100%;height: 10px;"></view>
        <!-- 规格等详情结束 -->

        <view class="desc-nav u-skeleton-fillet">
          <view class="nav-item" @click="isShow(1)">
            <span :class="{'active':is_show==1}">门店介绍</span>
          </view>
          <view class="nav-item" @click="isShow(2)">
            <span :class="{'active':is_show==2}">推荐门店</span>
          </view>
        </view>

        <!-- 同类热销 -->
        <view class="comment" v-if="is_show==2">
          <view class="page-section-spacing">
          	<scroll-view class="scroll-view_H" scroll-x="true">
          		<!-- 遍历 -->
          		<view class="scroll-view-item_H" v-for="(goodsItem,goodsIndex) in recommendData" :key="goodsIndex" @click="toGoodsDetail(goodsItem.id)">
          			<image class="item-img" :src="goodsItem.thumb_url?goodsItem.thumb_url:errImgUrl"></image>
          			<view class="no-wrap">{{goodsItem.name}}</view>
          			<view style="display: flex;justify-content: space-between;padding: 5px;font-size: 16px;">
          				<view style="color: red;">￥{{goodsItem.selling_price}}</view>
          				<!-- <image @click.stop="showCartModal(goodsItem.id)" style="width:20px;height: 20px;" src="../../static/mipmap-xhdpi/plus.png"></image> -->
          			</view>
          		</view>
				<view v-if='recommendData.length==0' class="null">
					空空如也~
				</view>
          	</scroll-view>
          </view>
        </view>
        <!-- 同类热销结束 -->
      </view>

      <!-- 商品介绍 -->
      <view class="goods_introduce" v-if="is_show==1">
        <view class="content">
          <view v-html="goodsDetail.detail"></view>
        </view>
      </view>
      <!-- 商品介绍结束 -->

      <!-- 底部购物栏 -->
<!--		<view class="cartBar">-->
<!--			<view class="cartBar_left">-->

<!--				<contact-button ref="contact" style="flex: 1">-->
<!--					<view class="cartBar_left_item" style="width: 100%;height: 90rpx">-->
<!--						<image style="width: 20px;height: 19px;" src="../../static/goodsDetail/lianxikefu.png"></image>-->
<!--						<view style="font-size: 24rpx;line-height: 28rpx">客服</view>-->
<!--					</view>-->
<!--				</contact-button>-->

<!--&lt;!&ndash;				<view class="cartBar_left_item cartIcon_wrapper" @click="toCart">&ndash;&gt;-->
<!--&lt;!&ndash;					<image style="width: 20px;height: 19px;" src="../../static/goodsDetail/gouwuche.png"></image>&ndash;&gt;-->
<!--&lt;!&ndash;					<view style="font-size: 24rpx">购物车</view>&ndash;&gt;-->
<!--&lt;!&ndash;					<view class="cartIcon" v-show="cartListNum!='0' &&cartListNum">{{cartListNum}}</view>&ndash;&gt;-->
<!--&lt;!&ndash;				</view>&ndash;&gt;-->
<!--			</view>-->
<!--			<view class="cartBar_right">-->
<!--				<view @click="showCart">{{prescription==1?'加入需求单':'加入购物车'}}</view>-->
<!--				<view @click="buy">{{prescription==1?'立即预定':'立即购买'}}</view>-->
<!--			</view>-->
<!--		</view>-->
      <!-- 底部购物栏结束 -->

      <!-- 弹出层 -->
     <!-- <view class="mask" v-if="showModal" @click="hideCart"></view> -->
	 <u-mask :show="showModal" @click="hideCart"></u-mask>
      <view class="modalDlg" v-if="showModal">
        <view class="modalDlg_top">
          <img :src="goodsDetail.thumb_url.length>0?goodsDetail.thumb_url[0].img_Url:''" alt="">
          <view class="modalDlg_top_right">
            <view class="modalDlg_top_right_name">
              <!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
              <span>{{goodsDetail.name}}</span>
            </view>
            <view class="cart_price">
              <span v-if="classifyIndex==-1">￥{{goodsDetail.selling_price}}</span>
              <span v-if="classifyIndex!=-1&&!buyNow">￥{{goodsDetail.goods_spu_info[classifyIndex].price}}</span>
              <span v-if="classifyIndex!=-1&&buyNow">￥{{goodsDetail.goods_spu_info[classifyIndex].distribution_price==''?goodsDetail.goods_spu_info[classifyIndex].price:goodsDetail.goods_spu_info[classifyIndex].distribution_price}}</span>
              <span v-if="classifyIndex==-1">库存：{{goodsDetail.stock}}</span>
              <span v-if="classifyIndex!=-1">库存：{{goodsDetail.goods_spu_info[classifyIndex].stock}}</span>
            </view>
          </view>
        </view>
        <!-- <view class="modalDlo_center">
          <view class="modalDlo_center_tit" v-if="goodsDetail.goods_spu_info.length!=0">规格</view>
          <view class="modalDlo_center_classify">
            <view
              v-for="(item,index) of goodsDetail.goods_spu_info"
              :key="index" @click="select_classify(item,index)"
              :class="{selectClassify:index==classifyIndex}"
            >
              {{item.spu_name}}
            </view>
          </view>
        </view> -->
        <view class="modalDlo_bottom">
          <!-- <count @numberChange="numberChange" :stock="classifyIndex==-1?goodsDetail.stock:goodsDetail.goods_spu_info[classifyIndex].stock">
            <view>购买数量</view>
          </count> -->
		  <view style="padding-bottom: 10px;">购买数量</view>
		  <u-number-box v-model="num" @change="numberChange"></u-number-box>
        </view>
		<block v-if="!isLogin">
			<button class="join_cart" open-type="getUserInfo" @getuserinfo="login">请先登录</button>
			<!-- <button class="join_cart" v-else open-type="getUserInfo" @getuserinfo="bindGetUserInfo">立即购买</button> -->
		</block>
		<block v-else>
			<view class="join_cart" v-if="!buyNow" @click="addCart">{{prescription==1?'加入需求单':'加入购物车'}}</view>
			<button :disabled="submitBtnDisable" class="join_cart" v-else @click="buying">{{prescription==1?'立即预定':'立即购买'}}</button>
		</block>
      </view>
      <!-- 弹出层结束 -->
    </view>

	<u-popup v-model="popupShow" closeable="false" border-radius="15" height="600" mode="bottom">
		<view style="color: grey;">
			<view style="padding: 15px" v-for="(item,index) in goodsDetail.discount_sales_rule_list" :key="index">{{item.discount_sales_rule_info.name}}</view>
		</view>
	</u-popup>

	<u-skeleton :loading="loading" :animation="false" bgColor="#FFF"></u-skeleton>
  </view>
</template>

<script>
	import contactButton from '../../components/contact-button/index'
	export default {
		name: 'goodsDetail',
		components: {
			contactButton
		},
		data() {
			return {
				submitBtnDisable: false,
				popupShow: false,
				FileUrl: this.$base,
				id: '',//商品id
				goodsDetail: '',//商品信息
				showModal: false,//显示弹出层
				buyNow: false,//显示加入购物车还是立即购买按钮
				is_show: 1,
				num: 1,//购买商品数量
				cartListNum: '',//购物车数量
				commentList: "",   //评论内容
				imgList: [],
				discountStr: '',
				classifyIndex: -1,//规格索引
				classifyId: '',//规格id
				page: 1,
				recommendData: [],
				is_img: '',
				loading: true, // 是否显示骨架屏组件
				isLogin: '',
				merchant: '',
				prescription: '', //判断改商品是否处方药
        couponList: []
			}
		},
		async onLoad(options) {
			this.id = options.id;

			if(options.user_id){
				let invited_user_id = options.user_id
				wx.setStorageSync("invited_user_id",invited_user_id)  //邀请人id存本地
				console.log('商品详情页面邀请人ID',wx.getStorageSync("invited_user_id"))
			}

			//如果是分享进来则需要获取店铺信息
			let merchant_id = options.merchant_id
			if (merchant_id) {
				await this.getMerchantById(merchant_id)
				if(this.$refs.contact){
					this.$refs.contact.updateData() //更新客服信息
				}
			}
			this.merchant = wx.getStorageSync('merchant')
			await this.getGoodsDetails();
      await this.getCouponList()
		},
		watch: {
			goodsDetail(nval) {
				//这里是设置轮播图的  TODO
				/* if (nval.goods_banner.length != 0) {
                  this.imgList = nval.goods_banner
                } else {
                  this.imgList = [nval.thumb_url]
                } */
			}
		},
		methods: {

      //优惠券列表
      async getCouponList(){
        let userToken=uni.getStorageSync('userToken');
        let merchant = uni.getStorageSync('merchant')
        const res=await this.$api.getCouponList({user_token:userToken,page: 1,limit: 999,merchant_id: merchant.merchant_id,medicine_id:this.id},this.$baseUrl);
        if(res.data.level=='success'){
          this.couponList = res.data.data
          this.couponList.forEach((item,index) => {
            if(item.start_time&&item.start_time.length>10){
              item.start_time = item.start_time.substring(0,11)
            }
            if(item.end_time&&item.end_time.length>10){
              item.end_time = item.end_time.substring(0,11)
            }
          })
        }
      },

      //领取优惠券
      async couponReceive(id){
        let userToken=uni.getStorageSync('userToken');
        const res=await this.$api.couponReceive({user_token:userToken,coupon_id: id},this.$baseUrl);
        if(res.data.level=='success'){
          this.getCouponList()
          wx.showToast({
            icon: 'success',
            title: res.data.message
          })
        } else {
          wx.showToast({
            icon: 'none',
            title: res.data.message
          })
        }
      },

			//解除禁用提交按钮
			enableSubmitBtn() {
				this.submitBtnDisable = false
			},

			//禁用提交按钮
			disableSubmitBtn() {
				this.submitBtnDisable = true
			},

			async getMerchantById(id) {
				let res= await this.$api.getMerchantList({
					merchant_id: id
				},this.$baseUrl)
				if(res.data.level==="success"){
					let merchant = res.data.data[0]
					if(!merchant){
						return
					}
					this.merchant = merchant
					wx.setStorageSync("merchant",merchant)
				}
			},

			contactCallBall(e) {
				if (e.detail.path) {
					this.$currency.navigateTo('/pages/udeskCart/index?key=' + e.detail.query.key)
				}
			},

			isShow(index) {
				this.is_show = index;
			},
			showCart() { //显示加入购物车
				this.num = 1;//清除规格数量
				this.showModal = true
				this.buyNow = false
			},
			buy() {//显示立即购买
				this.num = 1;//清除规格数量
				this.showModal = true
				this.buyNow = true
			},
			async buying() {   //点击弹窗的立即购买
				if (this.num <= 0) {
					wx.showToast({
						title: '购买数量不能为0',
						icon: 'none'
					})
					return
				}
				this.disableSubmitBtn()
				//判断是否处方药
				let prescription_order = ''
				if (this.goodsDetail.drug_type == 1) {
					prescription_order = 1
				}

				let res = await this.$api.submitOrder({
					medicine_id: this.id,
					num: this.num,
				}, this.$baseUrl)
				this.enableSubmitBtn()
				if (res.data.level == 'success') {
					res.data.data.medicine_id = this.id
					res.data.data.num = this.num
					this.$store.dispatch('setOrder', res.data.data)
					this.$currency.navigateTo('/pages/orderConfirm/orderConfirm?prescription_order='+prescription_order)
				} else {
					wx.showToast({
						title: res.data.message,
						icon: 'none'
					})
				}

			},
			hideCart() {
				this.showModal = false
			},
			async getGoodsDetails(id) {
				let merchant = wx.getStorageSync('merchant')
				this.loading = true;
				let res = await this.$api.getMedicineDetail({
					medicine_id: this.id,
					merchant_id: merchant.merchant_id
				}, this.$baseUrl)
				if (res.data.level == 'success') {
					let str = res.data.data;

					//判断改商品是否处方药
					if(str.drug_type==1){
						this.prescription = 1
					} else {
						this.prescription = ''
					}

					if (str.detail != null) {
						str.detail = str.detail.replace(/<img[^>]*>/gi, function (match, capture) {
							return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
						});
						str.detail = str.detail.replace(/\<img/gi, '<img style="max-width:100%;height:auto;vertical-align: top;" ');
					}
					this.goodsDetail = str
					res.data.data.discount_sales_rule_list.forEach((item, index) => {
						if (index == res.data.data.discount_sales_rule_list.length - 1) {
							this.discountStr = this.discountStr + item.discount_sales_rule_info.name
						} else {
							this.discountStr = this.discountStr + item.discount_sales_rule_info.name + '，'
						}
					})
					if (this.goodsDetail.classify_first_id) {
						this.getRecommendMedicineList(this.goodsDetail.classify_first_id)
					}
				}
				this.loading = false;
			},
			numberChange(num) {
				this.num = num.value
			},
			async addCart() {//添加到购物车
				const _this = this
				if (this.num <= 0) {
					this.$currency.showToast('购买数量不能为0');
					return
				}
				wx.showLoading()
				let res = await this.$api.addShopCart({
					medicine_id: this.id,
					num: this.num,
					/* goods_spu_id: this.classifyId */
				}, this.$baseUrl)
				if (res.data.level == 'success') {
					wx.hideLoading();
					this.showModal = false;
					if(this.isLogin){
						this.getCartList()
					}
					this.$currency.showToast(this.prescription==1?'加入需求单成功':'加入购物车成功','success')
				} else {
					wx.hideLoading();
					wx.showToast({
						title: res.data.message,
						icon: 'none'
					})
				}
			},
			async getCartList() {
				let merchant = wx.getStorageSync('merchant')
				let res = await this.$api.getShopCart({
					merchant_id: merchant.merchant_id
				}, this.$baseUrl);
				if (res.data.level == 'success') {
					if (res.data.data.length == 0) {
						this.cartListNum = 0
					} else {
						this.cartListNum = res.data.data[0].cart_item.length
					}
				}
			},
			select_classify(item, index) {//选择规格
				this.classifyIndex = index
				this.classifyId = item.id
				// this.$set(this.goodsDetail, 'stock', item.stock)
				// this.$set(this.goodsDetail, 's_price', item.price)
			},
			toCart() {
				wx.switchTab({url: '/pages/cart/cart'})
			},
			//获取推荐商品
			async getRecommendMedicineList(classifyId) {
				let merchant = wx.getStorageSync('merchant')
				let res = await this.$api.getMerchantMedicineList({
					merchant_id: merchant.merchant_id,
					limit: 6,
					classify_id: classifyId,
					page: this.page
				}, this.$baseUrl);
				if (res.data.level == 'success') {
					if (this.page == 1) {
						this.recommendData = res.data.data.medicine_info;
					} else {
						if (res.data.data.medicine_info.length == 0) {
							this.page--;
						} else {
							this.recommendData = this.recommendData.concat(res.data.data.medicine_info)
						}
					}
					for (let i = 0; i < this.recommendData.length; i++) {
						if (this.goodsDetail.id == this.recommendData[i].id) {
							this.recommendData.splice(i, 1)
							break;
						}
					}
				} else {
					wx.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 1500
					})
				}
			},

			showDiscountPopup() {
				this.popupShow = true;
			},

			//跳转商品详情
			toGoodsDetail(id) {
				wx.navigateTo({url: '/pages/goodsDetail/goodsDetail?id=' + id})
			},

			//微信授权
			async login(e) {
				const data = await this.$currency.bindGetUserInfo(e.detail.userInfo,this.$baseUrl)
				if(data=="success"){
					await this.$currency.getUserInfos(this.$baseUrl) //登录后要获取用户信息
				}
				this.isLogin = wx.getStorageSync("userToken") //判断用户是否登录
			},

		},
		onShareAppMessage() {
			let userId = wx.getStorageSync("user_id")
			let params = {
				desc: this.goodsDetail.name,
			}
			params.path = '/pages/goodsDetail/goodsDetail?id=' + this.id + '&merchant_id=' + this.merchant.merchant_id + '&user_id=' + userId;
			return params;
		},
		onShow() {
			this.num = 1;//清空选择商品的数量
			this.showModal = false//显示弹出层
			this.buyNow = false//显示加入购物车还是立即购买按钮
			this.classifyIndex = -1//规格索引
			this.classifyId = ''//规格idm
			this.isLogin = wx.getStorageSync('userToken')
			if(this.isLogin){
				this.getCartList()
			}
		},

	}
</script>

<style scoped lang="scss">
  @import "../../common/css/mixin.scss";

  .scrollForbidden {
    overflow: hidden; /*有弹出层时禁止下层滑动*/
  }

  swiper{height: 375px;}
  .slide-image{width: 100%;height: 375px;}

  /* 头部 */
  .goodsDetail {
    width: 100%;
    height: 100%;
    background: #eee;
  }

  .name_wrapper {
    padding: 10px;
    background: #fff;
  }

  .name {
    @include ellipsis(2);
    line-height: 40rpx;
    max-height: 80rpx;
    font-size: 32rpx;
    /* font-weight: bold; */
	font-weight: 500;
	color: #282936;
  }

  .top-detail{
	 margin-top: 5px;
	 font-size: 12px;
	 color: #8C8C8C;
	 line-height: 20px;
  }

  .desc {
    padding: 10rpx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
    .price {
      font-size: 26rpx;
      line-height: 70rpx;
	  @include flex(flex-start);
      .s-price {
        font-size: 22px;
		color: #FA4C72;
      }
	  .m-price {
	    text-decoration: line-through;
	    margin-left: 30rpx;
		color: #5c5c5c;
	  }
    }
    .bottom {
      font-size: 26rpx;
      color: #5c5c5c;
      @include flex(flex-start);
      line-height: 50rpx;
	  margin-right: 10px;
    }
  }

  .service {
    background: #ffffff;
    margin-top: 1rpx;
    padding: 15px 10px;
    @include flex(flex-start);
    flex-direction: row;

    .service-item {
      margin-right: 30rpx;

      img {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
        vertical-align: middle;
      }

      span {
        font-size: 24rpx;
        color: #5c5c5c;
        line-height: 30rpx;
      }
    }
  }

  /* 中间详情 */
  .goods_desc {
    width: 100%;
    margin-top: 10px;
    padding-bottom: 100rpx;
  }

  .goods_desc_item {
    background: #fff;
    display: flex;
    height: 40px;
    align-items: center;
    padding: 5px 10px;
	.left-text{
		color: #B8B8B8;
		font-size: 12px;
		span{
			color: #666666;
			font-size: 13px;
			/* @include ellipsis(1); */
		}
	}
	.one-line{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		padding-right: 5px;
	}
  }
  .goods_desc_item:nth-child(2){
	  padding: 0 10px;
  }

  .goods_desc_item image {
    width: 5px;
    height: 8px;
  }

  .list_item_arrow {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .desc-nav {
    width: 100%;
    background: #ffffff;
    /* border-bottom: 2rpx solid #eeeeee; */
    @include flex(flex-start);
    flex-direction: row;

    .nav-item {
      width: 50%;
      font-size: 30rpx;
      color: #5c5c5c;
      line-height: 100rpx;
      height: 100rpx;
      text-align: center;

      .active {
        line-height: 100rpx;
        height: 100rpx;
        border-bottom: 5px solid #09C15F;
        display: inline-block;
		color: #000000;
		font-weight: bold;
      }
    }
  }

  /* 评论列 */
  .comment {
    width: calc(100% - 20px);
    background: #fff;
    padding: 10px;
  }

  .comment_item {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    color: rgb(63, 60, 60);
    font-size: 14px;
  }

  .comment_item_top {
    @include flex(flex-start);
    flex-direction: row;
    /*margin-bottom: 10px;*/
  }

  .comment_item_img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 360rpx;
    overflow: hidden;
    margin-right: 10rpx;
  }

  .comment_item_nick {
    line-height: 80rpx;
    height: 80rpx;
  }

  .comment_item_content {
    padding: 10rpx 0 10rpx 100rpx;
    line-height: 40rpx;
  }

  .comment_item_time {
    text-align: right;
    font-size: 28 rpx;
    color: #5c5c5c;
  }

  .comment_btn {
    /*margin-top:10px;*/
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1rpx solid #eeeeee;
  }

  .comment_btn_all, .comment_btn_pic {
    width: 40%;
    height: 30px;
    line-height: 30px;
    padding: 2.5px 5px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid gray;
  }

  .no-wrap{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    white-space: normal;
    font-size: 13px;
    padding: 0 5px;
    min-height: 13px;
  }

  .page-section-spacing {
  	padding: 0 8px;
  }

  .scroll-view_H {
  	white-space: nowrap;
  	width: 100%
  }

  .scroll-view-item_H {
  	display: inline-block;
  	width: 110px;
  	text-align: center;
  	border: 1px solid #EEEEEE;
  	border-radius: 10rpx;
  	margin-right: 10px;
  	padding: 10px 10px 0;
  	background-color: #FFFFFF;
  	.item-img{
  		width: 110px;
  		height: 110px;
  	}
  }
  .scroll-view-item_H:last-child{
  	margin-right: 0;
  }

  /* 商品介绍 */
  .goods_introduce {
    background: #fff;
    width: calc(100% - 20px);
    padding: 10px 10px 50px 10px;
  }

  /* 规格参数 */
  .spec-value{
	  background-color: #FFFFFF;
	  padding: 10px;
	  .content{
	  	border: 1px solid #f4f4f4;
	  	padding: 0 5px;
	  }
	  .content-item{
	  	display: flex;
	  	align-items: center;
	  	padding: 10px 0;
	  	border-bottom: 1px solid #f4f4f4;
	  	font-size: 15px;
	  	.item-left{
			width: 30%;
			color: grey;
			/* font-weight: 700; */
	  	}
	  	.item-right{
	  		width: 70%;
	  		color: #464646;
	  		margin-left: 8px;
	  	}
	  }
  }
  .goods_specs{
	  background: #fff;
	  width: calc(100% - 20px);
	  padding: 10px 10px 50px 10px;
	  .content{
		  border: 1px solid #f4f4f4;
		  padding: 0 5px;
	  }
	  .content-item{
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #f4f4f4;
		font-size: 15px;
		.item-left{
			width: 30%;
			color: grey;
			/* font-weight: 700; */
		}
		.item-right{
			width: 70%;
			color: #464646;
			margin-left: 8px;
		}
	  }
	}


  /* 底部购物栏 */
  .cartBar {
    width: 100%;
    height: 90rpx;
    display: flex;
    position: fixed;
    bottom: 0;
    background: #fff;
	/* border-top: 1px solid #FFFFFF; */
  }
  .cartBar_left{
	width: 150px;
   }
   .cartBar_right{
	   width: calc(100% - 150px);
   }
  .cartBar_left, .cartBar_right {
    /* flex: 1; */
    display: flex;
  }

  .cartBar_left_item {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }

  .cartBar_left_item > img {
    width: 20px;
    height: 20px;
  }

  .cartBar_right {
    display: flex;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
  }

  .cartBar_right > view {
    flex: 1;
  }

  .cartBar_right > view:nth-child(1) {
    background: #F0F0F5;
	color: #000000;
  }

  .cartBar_right > view:nth-child(2) {
    background: #09C15F;
  }

  .cartIcon_wrapper {
    position: relative;
  }

  .cartIcon {
    position: absolute;
    background: red;
    right: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    top: -5px;
  }


  /* 弹出框 */
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
  }
  .modalDlg{
    width: 100%;
    height:45%;
    position: fixed;
    bottom:0;
    left: 0;
    z-index: 99999;
    background-color: #fff;
    padding-bottom: 40px;
	border-radius: 10px 10px 0 0;
  }

  .modalDlg_top{
    padding:5px;
    padding-right:25px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    height: 35%;

  }
  .modalDlg_top>img{
    width:80px;
    height: 80px;
  }
  .modalDlg_top_right{
    margin-left:20px;
    width:calc(100% - 100px);
  }
  .modalDlg_top_right_name{
    display: flex;
    align-items: center;
    span{
      @include ellipsis(3)
    }
  }
  .modalDlg_top_right_name_tag{
    color:purple;
    display: inline-block;
    width:50px;
    text-align: center;
    border:1px solid purple;
    font-size: 10px;
    border-radius: 5px;
    margin-right:5px;
  }
  .modalDlg_top_right_name_tag+span{
    width:200px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .modalDlo_bottom{
    margin-left:5px;
  }
  .cart_price{
    margin-top:15px;
    display: flex;
    justify-content: space-between;
    align-items: center
  }
  .cart_price>span:nth-child(1){
    color:red;
  }
  .modalDlo_center{
    max-height: 45%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
    width:100%;
    /*max-height: 45%;*/
  }
  .modalDlo_center_classify{
    display:flex;
    align-items: center;
    flex-wrap:wrap;
    margin:10px 0;
    /*padding-bottom: 50px;*/
  }
  .modalDlo_center_classify>view{
    border:1px solid #eee;
    padding:2.5px 5px;
    border-radius: 5px;
    margin-left:5px;
    text-align: center;
  }
  .modalDlo_center_tit{
    padding-left:10px;
  }
  .join_cart{
    width:100%;
    background: #ff1f3a;
    color:#fff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    bottom:0;
  }
  button::after {
    border: none;
  }
  button {
    background-color: #fff;
    line-height: 16px;
    font-size: 10px;
    border-radius:0;
  }

  button:hover{
	  background-color: #ff1f3a;
	  color: #ffffff;
  }

  .comment_item_pic {
    /*display: flex;*/
    padding: 10rpx 0 10rpx 80rpx;
    @include flex(flex-start);
    flex-direction: row;
    flex-wrap: wrap;
  }

  .comment_item_pic > img {
    width: calc((100vw - 180rpx)/3);
    height: calc((100vw - 180rpx)/3);
    margin-left: 20rpx;
    border-radius: 8rpx;
    overflow: hidden;
  }

  .comment-active {
    background: red;
    color: #ffffff;
    border: none;
  }

  /* 规格 */
  .selectClassify {
    border: red 1px solid !important;
    color: red;
  }

  /* 优惠券 */
  .page {
    min-height: 100vh;
    background-color: #EEEEEE;
  }
  .u-wrap {
    padding: 24rpx;
  }


  .coupon {
    margin-top: 20rpx;
    width: 700rpx;
    height: auto;
    background-color: #ffffff;
    display: flex;
    .left {
      width: 150px;
      /* padding: 0 30rpx; */
      background-color: rgb(95, 148, 224); //rgb(94, 152, 225);
      text-align: center;
      font-size: 28rpx;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .sum {
        /* margin-top: 50rpx; */
        font-weight: bold;
        font-size: 32rpx;
        .num {
          font-size: 60rpx;
        }
      }
      .type {
        /* margin-bottom: 50rpx; */
        font-size: 24rpx;
      }
    }
    .right {
      padding: 20rpx 20rpx 0;
      font-size: 28rpx;
      width: 250px;
      .top {
        border-bottom: 2rpx dashed $u-border-color;
        .title {
          /* margin-right: 60rpx; */
          line-height: 40rpx;
          .tag {
            padding: 4rpx 20rpx;
            background-color: rgb(73, 154, 201);
            border-radius: 20rpx;
            color: #ffffff;
            font-weight: bold;
            font-size: 24rpx;
            margin-right: 10rpx;
          }
          .spec{
            background-color: #30d0a6;
          }
        }
        .bottom {
          display: flex;
          margin-top: 20rpx;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10rpx;
          .date {
            font-size: 12px;
            flex: 1;
          }
          .immediate-use {
            height: auto;
            padding: 0 20rpx;
            font-size: 24rpx;
            border-radius: 40rpx;
            line-height: 40rpx;
            color: rgb(117, 142, 165);
            border: 2rpx solid rgb(117, 142, 165);
          }
        }
      }
      .tips {
        width: 100%;
        line-height: 50rpx;
        /* display: flex; */
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        .transpond {
          margin-right: 10rpx;
        }
        .explain {
          /* display: flex;
          align-items: center; */
        }
        .particulars {
          width: 30rpx;
          height: 30rpx;
          box-sizing: border-box;
          padding-top: 8rpx;
          border-radius: 50%;
          background-color: $u-type-info-disabled;
          text-align: center;
        }
        .immediate-use {
          margin: 5px 3px 5px 0px;
          float: right;
          height: auto;
          padding: 0 20rpx;
          font-size: 24rpx;
          border-radius: 40rpx;
          line-height: 40rpx;
          color: rgb(117, 142, 165);
          border: 2rpx solid rgb(117, 142, 165);
        }
      }
    }
  }
</style>
